<template>
  <view class="container">
    <!-- 用户信息 -->
    <view class="user-info">
      <image src="/static/user-avatar.png" class="avatar"></image>
      <view class="user-detail">
        <text class="user-name">助农先锋</text>
        <text class="user-desc">帮助农户销售农产品</text>
      </view>
      <view class="user-stats">
        <view class="stat-item">
          <text class="stat-value">12</text>
          <text class="stat-label">已购商品</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">5</text>
          <text class="stat-label">待收货</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">¥236</text>
          <text class="stat-label">累计消费</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <navigator class="menu-item" url="/pages/order/list">
        <image src="/static/order-icon.png" class="menu-icon"></image>
        <text class="menu-text">我的订单</text>
        <image src="/static/arrow-right.png" class="arrow"></image>
      </navigator>
      <navigator class="menu-item" url="/pages/address/list">
        <image src="/static/address-icon.png" class="menu-icon"></image>
        <text class="menu-text">收货地址</text>
        <image src="/static/arrow-right.png" class="arrow"></image>
      </navigator>
      <navigator class="menu-item" url="/pages/farmer/follow">
        <image src="/static/farmer-icon.png" class="menu-icon"></image>
        <text class="menu-text">关注农户</text>
        <image src="/static/arrow-right.png" class="arrow"></image>
      </navigator>
      <navigator class="menu-item" url="/pages/help/center">
        <image src="/static/help-icon.png" class="menu-icon"></image>
        <text class="menu-text">帮助中心</text>
        <image src="/static/arrow-right.png" class="arrow"></image>
      </navigator>
    </view>

    <!-- 退出登录 -->
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 用户信息
const userInfo = ref({
  avatar: '/static/user-avatar.png',
  name: '助农先锋',
  desc: '帮助农户销售农产品'
});

// 退出登录
const logout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出当前账号吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除登录状态
        uni.removeStorageSync('token');
        uni.removeStorageSync('userInfo');
        
        // 返回登录页（需自行实现登录页）
        uni.navigateTo({ url: '/pages/login/index' });
      }
    }
  });
};
</script>

<style scoped>
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
}

.user-info {
  background-color: #28a745;
  padding: 40rpx 30rpx;
  color: #fff;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
}

.user-detail {
  margin-left: 30rpx;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
}

.user-desc {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 10rpx;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 40rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
}

.stat-label {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.menu-list {
  margin-top: 20rpx;
  background-color: #fff;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.menu-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
}

.menu-text {
  font-size: 32rpx;
  color: #333;
}

.arrow {
  width: 20rpx;
  height: 20rpx;
  margin-left: auto;
}

.logout-btn {
  margin: 60rpx 30rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
  color: #e60012;
  border-radius: 10rpx;
  font-size: 32rpx;
  border: 1rpx solid #eee;
}
</style>